<template>
	<view class="scroll-nav">
		<scroll-view class="nav-scroll" scroll-x="true">
			<view class="item" v-for="(item,i) in navList" :key="item.id" :class="activeNavIndex===i?'active':''"
				@tap="changeCurrnet(i)">{{item.classname}}</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			navList:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				activeNavIndex: 0,
			}
		},
		methods: {
			changeCurrnet(current) {
				this.activeNavIndex = current;
				this.$emit('changeCurrnet',this.navList[current])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-scroll {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #eeeff2;
		white-space: nowrap;
		box-sizing: border-box;

		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		}

		.item {
			display: inline-flex;
			height: 60rpx;
			align-items: center;
			padding: 0 24rpx;
			margin: 0 10rpx;
			font-size: 32rpx;
			color: #3f4146;
			border-radius: 8rpx;

			&.active {
				color: #31c27c;
			}
		}
	}
</style>
